<script setup>
import router from '@/router';
import { onMounted, ref } from 'vue';

// 定义用户子导航路径
const userNavs = ref([{ name: '预警概览', path: '/warningover' }])

// 添加nav
const addNav = (name, path) => {
    for (let nav of userNavs.value) {
        if (nav.name === name) return
    }
    userNavs.value.push({ name, path })
}
// 删除nav
const deleteNav = (index) => {
    if (index < 0 || index >= userNavs.value.length) return
    userNavs.value.splice(index, 1)
    if (userNavs.value.length == 0) router.push('/home')
    else router.push(userNavs.value[userNavs.value.length - 1].path)
}
</script>

<template>
<div class="user-box">
    <!-- 用户左部子导航 -->
    <div class="left">
        <router-link to="/warningover" @click="addNav('预警概览', '/warningover')">预警概览</router-link>
        <router-link to="/warninglist" @click="addNav('预警名单', '/warninglist')">预警名单</router-link>
        <router-link to="/addwarning" @click="addNav('新增预警', '/addwarning')">新增预警</router-link>
        <router-link to="/warningeva" @click="addNav('预警评估', '/warningeva')">预警评估</router-link>
        <router-link to="/warninginter" @click="addNav('预警干预', '/warninginter')">预警干预</router-link>
        <router-link to="/warningset" @click="addNav('预警设置', '/warningset')">预警设置</router-link>

    </div>
    <div class="right">
        <!-- 用户子导航 -->
        <div class="user-nav-box">
            <router-link to="/home" style="border-radius: 0px 10px 0px 0px;">首页</router-link>
            <router-link v-for="(item, index) in userNavs" :to="item.path" :key="item.name">
                {{ item.name }} 
                <span v-if="item.name !== '首页'" @click.prevent="deleteNav(index)" class="user-nav-x">&nbsp;✖</span> 
            </router-link>
        </div>
        <!-- 用户表部门 -->
        <div class="user-main">
            <router-view></router-view>
        </div>
    </div>
</div>
</template>

<style scoped>
.user-box {
    display: flex;
    justify-content: space-between;
}
.left {
    width: 12%;
    height: 620px;
    background-color: white;
}
.right {
    width: 87.2%;
}
.left a {
    display: block;
    text-align: center;
    padding: 15px 0 15px 0;
    transition: all 0.3s ease;
}
a:hover {
    background-color: #e7f4ff;
    color: #5bafff;
}
.router-link-active {
    background-color: #e7f4ff;
    color: #5bafff;
}
.user-nav-box {
    overflow: hidden;
    display: flex;
    height: 40px;
    background-color: white;
}
.user-nav-box a:hover .user-nav-x {
    font-size: 12px;
}
.user-nav-x {
    font-size: 0px;
    transition: all 0.3s ease;
}
.user-nav-x:hover {
    color: red;
}
.user-nav-box a {
    margin-right: 10px;
    padding: 0 30px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 10px 10px 0px 0px;
}
.user-main {
    margin-top: 10px;
    background-color: white;
    min-height: 570px;
}
</style>
